<template>
    <div class="app-container">
        <div class="project-manage">
            <div class='main-top'>
                <el-form   label-width="90px" :inline="true" :model="formInline" class="form-style">
                    <el-form-item label="车牌号码:">
                        <el-input v-model="formInline.carNum"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="操作人员姓名:">
                        <el-input v-model="formInline.name"   placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="工号:">
                        <el-input v-model="formInline.number"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="电话:">
                        <el-input v-model="formInline.phone"   placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>  
                        <el-button @click="search()" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="reSet()" type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- <div class="main-nav">
                <div><el-button @click="arrangeMember()" >分配配送人</el-button></div>
            </div> -->
            <div class="main-table">
                <el-table v-loading="tableLoading"  :data="tableList" height="550" border style="width: 100%">
                    <el-table-column align="center" prop="licensePlate" label="车牌号码" > </el-table-column>
					<el-table-column align="center" prop="lineNumber" label="路线编号" > </el-table-column>
                    <el-table-column align="center" prop="lineName" label="线路名称" > </el-table-column>
                    <el-table-column align="center" prop="name" label="配送员姓名" > </el-table-column>
                    <el-table-column align="center" prop="jobNumber" label="配送员工号" > </el-table-column>
                    <el-table-column align="center" prop="relationship" label="配送类型" > </el-table-column>
                    <el-table-column align="center" prop="adjustTime" label="分配日期" > </el-table-column>
                    <el-table-column  label="操作" width="250">
                        <template slot-scope="scope">
                            <el-button size="mini"  @click=" reviseMember(scope)">调整配送人员</el-button>
                            <el-button size="mini"  @click="getRecord(scope)">查看调整记录</el-button>
                        </template>
                    </el-table-column>     
                </el-table>
                <div class="block">
					<el-pagination
					background
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="handleCurrentChange"    
					>
					</el-pagination>
				</div>   
            </div>
            <template name='查看调整记录'>
                <el-dialog center title="查看调整记录" :visible.sync="showList">
					<div class="main-title">    
						<span>车辆编号：沪AG1234</span>
					</div>
                  	<div class="main-table">
                      	<el-table stripe  :data="recordList" height="380" border style="width: 100%">
							<el-table-column align="center" prop="name" label="配送员姓名" > </el-table-column>
							<el-table-column align="center" prop="jobNumber" label="配送员编号" > </el-table-column>
							<el-table-column align="center" prop="adjustTime" label="调整日期" > </el-table-column>
							<el-table-column align="center" prop="relationship" label="配送类型" > </el-table-column>
							<el-table-column align="center" prop="effectTime" label="生效日期" > </el-table-column>
							<el-table-column align="center" prop="invalidTime" label="失效日期" > </el-table-column>
							<el-table-column align="center" prop="userName" label="操作人" > </el-table-column>
                      	</el-table>
                  	</div>
                </el-dialog>
            </template>
             <template name='配送员调整'>
                <el-dialog center :title="showArrange? '配送人员分配' : '配送人员调整' " :visible.sync="showRevise">
					<div class="main-title">
						<span>车辆编号：{{layerCarInfo.licensePlate}}</span>
						<span>当前配送员：{{layerCarInfo.name}}</span>
					</div>
                    <div class="layerForm">
                        <el-form  :label-position="'left'" label-width="100px" :model="formLabelAlign">
                            <el-form-item :label="showArrange? '配送人员分配' : '配送人员调整' ">
                                <el-select       placeholder="请输入员工编号"   :remote-method='remoteMethod' remote value-key='id'  v-model="info"   @change='getName'      :loading="selectLoading"  filterable>
                                    <el-option v-for="(item,index) in selectList" :key="item.id" :value="item" :label="item.jobNumber"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="配送员姓名：">
                                <el-input   :disabled='true' v-model="formLabelAlign.name"></el-input>
                            </el-form-item>
                            <el-form-item label="配送类型：">
                                <el-select v-model="formLabelAlign.type" >
                                    <el-option v-for="(item,index) in options" :value="item.value" :key="index" :label="item.label"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生效时间：">
                                <el-date-picker @change="getCreatedTime" :disabled="formLabelAlign.type === '0'" type="datetime" placeholder="选择日期" v-model="formLabelAlign.creatTime" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="失效时间：">
                                <el-date-picker @change="getMissTime" :disabled="formLabelAlign.type === '0'" type="datetime" placeholder="选择日期" v-model="formLabelAlign.missTime" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
						<el-button class='approl' type="primary" @click="submitClick('1')">取 消</el-button>
						<el-button class="refuse" @click="submitClick('2')">完 成</el-button>
					</div>
                </el-dialog>
            </template>
        </div>
    </div>
</template>

<script>
import {gettableList, getLayerInfo, getDispatchList, submitInfo, getRecord} from '@/api/reviseManage'

export default {
    data() {
        return {
            tableList:[{"adjustTime": "2018-05-16T02:54:36.039Z",
        "id": "string",
        "jobNumber": "string",
        "licensePlate": "string",
        "lineName": "string",
        "lineNumber": "string",
        "name": "string",
        "relationship": "固定"}],
            formInline:{choosenItem:'',name:'',number:'',phone:''},
            tableLoading:false,
            currentPage:1,
            totalPage:0,
            showList:false,
            showRevise:false,
            formLabelAlign:{name:'',type:'',creatTime:'',missTime:'',choosenItem:{jobNumber:'',name:''}},
            info:{},
            showArrange:'',
            layerCarInfo:{licensePlate:'',name:''},
            searchValue:'',
            selectLoading:false,
            selectList:[],
            choosenItem:'',
            options: [{
                        value: '0',
                        label: '固定'
                        }, {
                        value: '1',
                        label: '临时'
                    }],
            vehicleId:'',
            recordList:[]
            
        }
    },
    // watch: {
    //   'formLabelAlign.choosenItem': function (value) {
    //       this.remoteMethod(value)
    //       console.log(value)
    //       console.log(this.formLabelAlign.choosenItem.jobNumber)
         
    //   } 
    // },
    methods: {
        getCreatedTime(value) {
            this.formLabelAlign.creatTime = value
        },
        getMissTime(value) {
            this.formLabelAlign.missTime = value
        },
        gettableList(current) {
            this.tableLoading = true
            let data= 
                {
                "current": current || this.currentPage,
                "jobNumber": this.formInline.number,
                "name": this.formInline.name,
                "phone": this.formInline.phone,
                'licensePlate':this.formInline.carNum,
                "size": 10
                }
            gettableList(data).then(res=>{
                this.tableList = res.data.data.records
                this.totalPage = res.data.data.total
                this.tableLoading = false
            })
        },
        reSet() {
            this.formInline = {carNum:'',name:'',number:'',phone:''},
            this.gettableList()
        },
        search() {
            this.currentPage = 1
            this.gettableList()
        },

        handleCurrentChange(current) {
            this.gettableList(current)
        },
        arrangeMember() {
            this.showArrange = true
            this.showRevise = true
        },
        reviseMember(scope) {
            console.log(scope)
            this.showArrange = false
            this.showRevise = true
            this.vehicleId = scope.row.id || ''
            this.formLabelAlign = {name:'',type:'',creatTime:'',missTime:'',} //清空弹窗内容
            this.info = {}
            getLayerInfo(this.vehicleId).then(res=> {
                if(res.data.code ===0){
                    this.layerCarInfo = res.data.data
                }else{
                    return false
                }
            })
        },
        remoteMethod(query) {
            //this.searchValue = value
            console.log(query)
            console.log("什么")
            const data = {
                        "current": 1,
                        "jobNumber": query,
                        "name": "",
                        "phone": "",
                        "size": 200
                        }
            this.getDispatchList(data)
        },
        getDispatchList(params){
            console.log("进来进来")
            getDispatchList(params).then(res=>{
                console.log(res)
                this.selectList = res.data.data.records
                console.log(this.selectList)
            }) 
        },
        getName(item) {
            console.log(item)
            console.log('!~~~~~~~~~~~~~')
            this.formLabelAlign.name = item.name
            this.formLabelAlign.choosenItem = item
        },
        getRecord(value) {
            const id = value.row.id
            const data = {
                "current": 1,
                "size": 100
            }
            getRecord(id, data).then(res=>{
                this.showList = true
                this.recordList = res.data.data.records
            })
        },
        submitClick(code) {
            if(code == '1'){
                this.showRevise = false
            }else if(code == '2'){
                const data = {
                    "deliveryType": this.formLabelAlign.type,
                    "effectTime": this.formLabelAlign.creatTime,
                    "invalidTime": this.formLabelAlign.missTime,
                    "userId": this.formLabelAlign.choosenItem.id
                }
                const id  = this.vehicleId
                submitInfo(id,data).then(res =>{
                if(res.data.code === 0){
                    this.showRevise = false
                    this.$message.success('调整成功')
                    this.gettableList()
                }else{
                    this.$message.error('异常')
                }
            })
            }
            
            
        }
        
    },
    // watch:{
    //     searchValue:this.gettableList()
    // },
    created () {
        this.gettableList()
    }
  
}
</script>
<style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
    .project-manage{
        .main-top{
            padding: 32px 15px;
            padding-bottom: 20px;
            background-color: #FFF;
            .el-input{
                width: 150px ;
            }
            .el-button{
                padding: 11px 33px;
                margin-left: 5px;
            }
            .el-form-item{
                margin-right: 0px;
            }
        }
        .main-nav{
            @include navStyle
        }
        .addenp{
            .el-form-item{
            margin-bottom: 10px;
            }
            .el-dialog__body{
            padding: 30px 35px;
            padding-bottom: 0px;
            }
            .dialog-footer{
            padding:11px 50px 29px 0px;
            text-align: right;
            .el-button{
                padding: 10px 30px;
                border: none;
            }
            .cancel{
                color: #000;
                background: #E0E0E0;
                border-radius: 3px;
            }
            }
        }
        .main-title{
			margin-bottom: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			span{
				display: inline-block;
			}
		}
		.block{
            text-align: center;
            margin-top: 15px;
        }
        .layerForm{
            padding: 0 70px;
            .el-input{
                width: 300px;
            }
            .el-date-editor{
                width: 300px !important;
            }
        }
    }
</style>
